import React from 'react'
import { createBehavior, createResource } from '@bill_law6/designable-core'
import { DnFC } from '@bill_law6/designable-react'
import { Checkbox as ShadcnCheckbox } from '../../ui/checkbox'
import { createFieldSchema } from '../Field'
import { AllSchemas } from '../../schemas'
import { AllLocales } from '../../locales'

export interface CheckboxProps extends React.ComponentProps<typeof ShadcnCheckbox> {}

export const Checkbox: DnFC<CheckboxProps> = ShadcnCheckbox as any

Checkbox.Behavior = createBehavior({
  name: 'Checkbox',
  extends: ['Field'],
  selector: (node) => node.props['x-component'] === 'Checkbox',
  designerProps: {
    propsSchema: createFieldSchema(AllSchemas.Checkbox),
  },
  designerLocales: AllLocales.Checkbox,
})

Checkbox.Resource = createResource('Inputs', {
  title: { 'zh-CN': '复选框', 'en-US': 'Checkbox' },
  icon: 'CheckboxSource',
  elements: [
    {
      componentName: 'Field',
      props: {
        type: 'boolean',
        title: 'Checkbox',
        'x-decorator': 'FormItem',
        'x-component': 'Checkbox',
      },
    },
  ],
})